<template>
  <div id="app">
    <table class="tb">
      <tr>
        <th>编号</th>
        <th>品牌名称</th>
        <th>创立时间</th>
        <th>操作</th>
      </tr>
      <!-- 循环渲染的元素tr -->
      <tr v-for="item in list" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.time }}</td>
        <td>
          <!-- 按照索引删除 -->
          <button @click="del(id)">删除</button>
        </td>
      </tr>
      <tr v-if="list.length === 0 ">
        <!-- 判断数据还有米有，没有就显示没有数据了 根据数组长度判定-->
        <!-- v-if="list.length === 0 " 为啥放tr里和td里效果一样，有区别吗？ -->
        <td colspan="4">没有数据咯~</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: "奔驰", time: "2020-08-01" },
        { id: 2, name: "宝马", time: "2020-08-02" },
        { id: 3, name: "奥迪", time: "2020-08-03" },
      ],
    };
  },
  methods: {
    del(id) {
      // this.list.length =
      // 根据id删除元素 或者根据索引index删除元素都行
      // splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组
      // 并以数组形式返回由被删除的元素组成的一个数组
      // this.list.splice(id,1)
      // splice(start, deleteCount, item1,...)
      // start 指定修改的开始位置 deleteCount 整数，表示要移除的数组元素的个数
      //item1 要添加进数组的元素，从start 位置开始。如果不指定，则 splice() 将只删除数组元素。
       this.list = this.list.filter(item => item.id = ! id)
    }
  }
};
</script>

<style>
#app {
  width: 600px;
  margin: 10px auto;
}

.tb {
  border-collapse: collapse;
  width: 100%;
}

.tb th {
  background-color: #0094ff;
  color: white;
}

.tb td,
.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}

.add {
  padding: 5px;
  border: 1px solid black;
  margin-bottom: 10px;
}
</style>
